<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      // 订阅发布
      // class pubSub {
      //   constructor() {
      //     this.subs = {}
      //   }

      //   subscribe(key, fn) {
      //     if (!this.subs[key]) {
      //       this.subs[key] = []
      //     }
      //     this.subs[key].push(fn)
      //   }

      //   publish(key, ...params) {
      //     if (!(key in this.subs)) {
      //       return new Error('未注册该事件')
      //     }
      //     this.subs[key].forEach((fn) => {
      //       fn.apply(this, params)
      //     })
      //   }

      //   remove(key, fn) {
      //     if (!(key in this.subs)) {
      //       return new Error('未注册该事件')
      //     }
      //     const idx = this.subs[key].findIndex((e) => e === fn)
      //     if (idx === undefined) {
      //       return new Error('无该绑定事件')
      //     }
      //     this.subs[key].splice(idx, 1)
      //     if (!this.subs[key].length) {
      //       delete this.subs[key]
      //     }
      //   }
      // }

      // const ps = new pubSub()
      // console.log('🚀🚀🚀wimi======>>>ps', ps)
      // function fn1(params) {
      //   console.log('🚀🚀🚀wimi======>>>fn1', params)
      // }
      // function fn2(params) {
      //   console.log('🚀🚀🚀wimi======>>>fn2', params)
      // }

      // ps.subscribe('a', fn1)
      // ps.subscribe('a', fn2)
      // ps.subscribe('b', fn2)

      // ps.publish('a', 'a')
      // ps.publish('b', 'b')

      // ps.remove('a', fn2)

      // 观察者
      class Subject {
        constructor() {
          this.observers = []
        }
        add(observer) {
          this.observers.push(observer)
        }
        remove(observer) {
          this.observers.filter((item) => item === observer)
        }
        notify() {
          this.observers.forEach((item) => {
            item.update()
          })
        }
      }

      class Observer {
        constructor(name) {
          this.name = name
        }
        update() {
          console.log('🚀🚀🚀wimi======>>>name', this.name)
        }
      }

      let sub = new Subject()
      let obs1 = new Observer('leaf111')
      let obs2 = new Observer('leaf222')
      sub.add(obs1)
      sub.add(obs2)
      sub.notify()
    </script>
  </body>
</html>
